import { Button, NavBar, Form, Input, Toast } from 'antd-mobile'
import styles from './index.module.scss'
import { FormData } from '@/types/data'
import { useDispatch } from 'react-redux'
import { loginAction } from '@/store/actions/login'
import { useHistory, useLocation } from 'react-router-dom'
import { AxiosError } from 'axios'
import { useEffect, useRef, useState } from 'react'
import { InputRef } from 'antd-mobile/es/components/input'
import { sendCodeAction } from '@/store/actions/login'
const Login = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const location = useLocation<{ from: string } | undefined>()
  const [form] = Form.useForm()
  const login = async (formData: FormData) => {
    try {
      console.log('获取表单的值:', formData)
      // 登录结合redux实现流程：
      // 1.dispatch分发异步action函数(发请求登录，获取token,存数到redux)
      // 2.提示跳转首页
      await dispatch<any>(loginAction(formData))
      Toast.show({
        icon: 'success',
        content: '登录成功',
        afterClose: () => {
          history.push(location.state!.from || '/home')
        },
      })
    } catch (error) {
      // AxiosError<{ 这里指定的是data的类型 }>
      const e = error as AxiosError<{ message: string }>
      Toast.show({
        icon: 'fail',
        content: e.response?.data.message,
      })

      console.log(error)
    }
  }
  useEffect(() => {
    console.log('form组件的实例', form)
  }, [form])
  // 发短信获取验证码
  const mobileRef = useRef<InputRef>(null)
  // 倒计时的秒数
  const [count, setCount] = useState(0)
  // 定时器的标识
  const timerRef = useRef(0)

  const getCode = async () => {
    /**
     * 1.获取手机号并校验格式
     * 2.校验失败，手机输入栏重新获取焦点=》提示用户重新输入
     * 3.校验成功，跳转
     */
    // 这里的mobile就是要传输到后台的数据
    const mobile = form.getFieldValue('mobile')
    const hasError = form.getFieldError('mobile').length
    if (!mobile.trim() || hasError) {
      Toast.show({
        content: '请输入正确的手机号',
      })
      return mobileRef.current?.focus() //这里是focus方法，获取焦点
    }
    // 校验通过=》发送验证码
    try {
      await dispatch<any>(sendCodeAction(mobile))
      /**
       * 需求：成功发送验证码后，实现60s倒计时，60s内不能重复发送
       * 1.准备倒计时状态(秒数)：0
       * 2.设置倒计时秒数：60
       * 3.开始倒计时：定时器，每隔1s对状态执行减一
       */
      setCount(60)
      //注意：使用window.setInterval解决类型错误
      timerRef.current = window.setInterval(() => {
        // setCount(count - 1) //这样写会因为闭包的问题，导致一致访问的是外部得变量，所以需要使用回调函数
        setCount((c) => c - 1)
      }, 1000)
    } catch (e) {
      console.log(e)
    }
  }
  // 当count=0的时候清除定时器
  useEffect(() => {
    if (count === 0) {
      clearInterval(timerRef.current)
    }
  }, [count])
  // 组件销毁的时候清除定时器
  useEffect(() => {
    return () => {
      // 组件销毁清除定时器，释放内存
      clearInterval(timerRef.current)
    }
  })
  return (
    <div className={styles.root}>
      <NavBar back="返回">标题</NavBar>

      <div className="login-form">
        <h2 className="title">账号登录</h2>

        <Form onFinish={login} form={form} validateTrigger={['onBlur']}>
          {/* 手机号 */}
          <Form.Item
            // name要和后台调用接口参数保持一致
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误',
              },
            ]}
            className="login-item">
            <Input ref={mobileRef} placeholder="请输入手机号"></Input>
          </Form.Item>
          {/* 验证码 */}
          <Form.Item
            name="code"
            rules={[
              { required: true, message: '请输入验证码' },
              { max: 6, min: 6, message: '验证码长度错误' },
            ]}
            className="login-item"
            extra={
              <span
                // 1.判断count=0才能点击执行发送验证码
                onClick={count === 0 ? getCode : undefined}
                className="code-extra">
                {/* 2.判断count！=0,说明开始倒计时了，显示倒计时秒数 */}
                {count === 0 ? '发送验证码' : `${count}s后重新发送`}
              </span>
            }>
            <Input placeholder="请输入验证码" autoComplete="off" />
          </Form.Item>
          {/* 提交 */}
          {/* noStyle 表示不提供 Form.Item 自带的样式 */}
          <Form.Item noStyle shouldUpdate>
            {/* <Button
              block
              type="submit"
              color="primary"
              className="login-submit">
              登 录
            </Button> */}
            {/* 需求：1.表单校验成功，登录按钮为启用
                    2.表单校验失败或者用户还没有输入时，登录按钮为禁言 */}
            {/* 实现：1.shouldUpdate属性，在表单输入发生变化后，会重新执行Form.Item下的回调函数，重新渲染button 
            2.通过按钮的disabled控制是否启用或禁用
            1.form.isFieldTouched(true)=》检查表单中所有的项是否输入过，没有输入过返回false
            2.form.getFieldError()判断是否有正确的格式*/}
            {() => (
              <Button
                block
                type="submit"
                color="primary"
                className="login-submit"
                // disabled={
                //   !form.isFieldTouched(true) ||
                //   !!form.getFieldError().filter(({ errors }) => errors.length)
                //     .length
                // }
              >
                登录
              </Button>
            )}
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
